{% load i18n %}
<div style="width: 580px;height: 430px;">
    <div class="register-box" style="font-size: 12px">
        <div></div>
        <div class="info-sm-box">
            <div class="info-sm-box-label">{% trans 'software_version' %}</div>
            <div>{{ ver }}</div>
        </div>
        <div class="info-sm-box">
            <div class="info-sm-box-label">
                <span>{% trans 'authorized_information' %}</span>
            </div>
            <div class="info-box-item">
                <div class="box-item box-item-label">
                    {% trans 'label_customer_code' %}
                </div>
                <div class="box-item box-item-val">
                    {{ customer_id }}
                </div>
            </div>
            <div class="info-box-item">
                <div class="box-item box-item-label">
                    {% trans 'label_used_devices' %}
                </div>
                <div class="box-item box-item-val">
                    {% if used_devices > authorized_devices %}<font color="red">{{ used_devices }}</font>{% else %}
                        {{ used_devices }}{% endif %}/{{ authorized_devices }}
                </div>
            </div>
            <div class="info-box-item">
                <div class="box-item box-item-label">
                    {% trans 'label_used_employees' %}
                </div>
                <div class="box-item box-item-val">
                    {% if used_employees > authorized_employees %}
                        <font color="red">{{ used_employees }}</font>{% else %}{{ used_employees }}{% endif %}
                    /{{ authorized_employees }}
                </div>
            </div>
            <div class="info-box-item">
                <div class="box-item box-item-label">
                    {% trans 'label_used_apps' %}
                </div>
                <div class="box-item box-item-val">
                    {% if used_apps > authorized_apps %}<font color="red">{{ used_apps }}</font>{% else %}
                        {{ used_apps }}{% endif %}/{{ authorized_apps }}
                </div>
            </div>
            {% if request.user.is_superuser %}
                <div class="info-box-item">
                    <div class="box-item box-item-label">
                        {% trans 'label_used_companies' %}
                    </div>
                    <div class="box-item box-item-val" id="used_companies">
                    </div>
                </div>
                <div class="info-box-item">
                    <div class="box-item box-item-label">
                        {% trans 'label_used_FBaccounts' %}
                    </div>
                    <div class="box-item box-item-val" id="used_FBaccounts">
                    </div>
                </div>
            {% endif %}
            <div class="info-box-item">
                <div class="box-item box-item-label">
                    {% trans 'label_authorized_date' %}
                </div>
                <div class="box-item box-item-val">
                    {{ authorized_date }}
                </div>
            </div>
            <div class="info-box-item">
                <div class="box-item box-item-label">
                    {% trans 'label_expired_date' %}
                </div>
                <div class="box-item box-item-val">
                    {{ expired_date }}
                </div>
            </div>
            <div class="info-box-item">
                <div class="box-item box-item-label">
                    {% trans 'label_authorized_company' %}
                </div>
                <div class="box-item box-item-val">
                    {{ company }}
                </div>
            </div>
        </div>
        <div class="info-sm-box license-active">
            <div class="info-sm-box-label">
                <span>{% trans 'license_activation' %}</span>
            </div>
            <div class="info-box-activation">
                <a id="online_activation" href="javascript:void(0);">{% trans 'online_activation' %}</a>
                <a id="download_upk" href="javascript:void(0);">{% trans 'download_upk' %}</a>
                <a id="offline_activation" href="javascript:void(0);">{% trans 'offline_activation' %}</a>
                <a id="online_upgrade_license" href="javascript:void(0);">{% trans 'online_upgrade_license' %}</a>
            </div>
        </div>
        <div class="info-sm-box license-active">
            <div class="info-sm-box-label">
                <span>{% trans 'aboutPage_title_licenseMigration' %}</span>
            </div>
            <div class="info-box-activation">
                <a id="export_license" href="javascript:void(0);">{% trans 'export_license' %}</a>
                <a id="import_license" href="javascript:void(0);">{% trans 'import_license' %}</a>
            </div>
        </div>
        <div class="info-sm-box server-information">
            <div class="info-sm-box-label">
                <span>{% trans 'drive_download' %}</span>
            </div>
            <div class="info-box-activation">
                <a href="/files/help/Fingerprint Reader Driver.exe">{% trans 'fingerprint_download' %}</a>
            </div>
        </div>
        <div class="info-sm-box server-information" style="height: 125px">
            <div class="info-sm-box-label">
                <span>{% trans 'app_download' %}</span>
            </div>
            <div class="info-box-item" style="width: 200px">
                <div style="width: 100px;float: left;text-align: center">
                    <img src="{{ MEDIA_URL }}images/abroad_att/app_store.png" alt="" style="width:70px;height:70px;">
                </div>
                <div style="width: 100px;float: left;text-align: center">
                    <img src="{{ MEDIA_URL }}images/abroad_att/play_store.png" alt="" style="width:70px;height:70px;">
                </div>
            </div>
            <div class="info-box-item" style="width: 200px">
                <div style="width: 100px;float: left;text-align: center">
                    App Store
                </div>
                <div style="width: 100px;float: left;text-align: center">
                    Play Store
                </div>
            </div>
        </div>
        <div class="info-sm-box server-information layui-hide">
            <div class="info-sm-box-label">
                <span>{% trans 'server_information' %}</span>
            </div>
            <div class="info-box-item">
                <div class="box-item box-item-label">{% trans 'label_machine' %}</div>
                <div class="box-item box-item-val">{{ machine }} </div>
            </div>
            <div class="info-box-item">
                <div class="box-item box-item-label">{% trans 'label_processor' %}</div>
                <div class="box-item box-item-val">{{ processor }} </div>
            </div>
            <div class="info-box-item">
                <div class="box-item box-item-label">{% trans 'label_platform' %}</div>
                <div class="box-item box-item-val">{{ platform }} </div>
            </div>
            <!--
            <div class="info-box-item">
                <div class="box-item box-item-label">{% trans 'label_ram_total' %}</div>
                <div class="box-item box-item-val">{{ ram_total }} </div>
            </div>
            <div class="info-box-item">
                <div class="box-item box-item-label">{% trans 'label_ram_free' %}</div>
                <div class="box-item box-item-val">{{ ram_free }} </div>
            </div>
            -->
        </div>
    </div>
    <script>
        $(function () {
            function userAuth(activation, extra) {
                var authPost = function (index, layero) {
                    var loadIndex = layer.load();
                    $("#id_admin_log").ajaxSubmit({
                        url: "{% url 'biotime:authenticate' %}"
                        , type: "POST"
                        , dataType: "json"
                        , success: function (callback) {
                            layer.close(loadIndex);
                            if (callback.ret == 0) {
                                activation(index, layero, extra);
                            } else {
                                layer.msg(callback.message, {icon: 5});
                            }
                        }
                        , error: function () {
                            layer.close(loadIndex);
                        }
                    });
                };
                $.ajax({
                    url: "{% url 'biotime:authenticate' %}",
                    type: "GET",
                    dataType: "html",
                    success: function (pannel) {
                        layer.open({
                            title: "{% trans 'user_authenticate' %}"
                            , type: 1
                            , zIndex: 1002
                            , area: ['350px', '230px']
                            , content: pannel
                            , btn: [gettext('authenticate_btn_confirm'), gettext('authenticate_btn_cancel')]
                            , success: function (layero, index) {
                                $(layero).find("#id_user_name").focus();
                                $(layero).find("#id_password").keypress(function (event) {
                                    if (event.keyCode === 13) {
                                        authPost(index, layero)
                                    }
                                });
                            }
                            , yes: authPost
                        })
                    }
                })
            }

            var offlineActivation = function (index, layero, extra) {
                $.ajax({
                    url: "{% url 'biotime:offline_activation' %}",
                    type: "GET",
                    dataType: "html",
                    success: function (pannel) {
                        layer.close(index);
                        layer.open({
                            type: 1,
                            title: extra.txt,
                            zIndex: 1003,
                            area: ['450px', '250px'],
                            content: pannel,
                            btn: [gettext('license_btn_active'), gettext('license_btn_cancel')],
                            yes: function (index, layero) {
                                var loadIndex = layer.load();
                                $(layero).find(".layui-form").ajaxSubmit({
                                    url: "{% url 'biotime:offline_activation' %}"
                                    , type: "POST"
                                    , dataType: "json"
                                    , success: function (callback) {
                                        if (callback.ret == 1) {
                                            layer.msg(callback.message, {icon: 1}, function () {
                                                layer.closeAll();
                                            })
                                        } else {
                                            layer.msg(callback.message, {icon: 5});
                                        }
                                        layer.close(loadIndex);
                                    }
                                    , error: function () {
                                        layer.close(loadIndex);
                                    }
                                })
                            }
                        });
                    }, error: function () {

                    }
                })
            };
            $("#offline_activation").click(function () {
                var extra = {txt: this.text};
                userAuth(offlineActivation, extra);
            });
            var onlineActivation = function (index, layero, extra) {
                $.ajax({
                    url: "{% url 'biotime:online_activation' %}",
                    type: "GET",
                    dataType: "html",
                    success: function (pannel) {
                        layer.close(index);
                        layer.open({
                            type: 1,
                            title: extra.txt,
                            zIndex: 1003,
                            area: ['575px', '385px'],
                            content: pannel,
                            btn: [gettext('license_btn_active'), gettext('license_btn_cancel')],
                            yes: function (index, layero) {
                                var loadIndex = layer.load();
                                $(layero).find(".layui-form").ajaxSubmit({
                                    url: "{% url 'biotime:online_activation' %}"
                                    , type: "POST"
                                    , dataType: "json"
                                    , success: function (callback) {
                                        if (callback.ret == 1) {
                                            layer.msg(callback.message, {icon: 1, time: 2000}, function () {
                                                layer.closeAll();
                                            })
                                        } else {
                                            layer.msg(callback.message, {icon: 5});
                                        }
                                        layer.close(loadIndex);
                                    }
                                    , error: function () {
                                        layer.close(loadIndex);
                                    }
                                })
                            }
                        });
                    }, error: function () {

                    }
                })
            };
            $("#online_activation").click(function () {
                var extra = {txt: this.text};
                userAuth(onlineActivation, extra);
            });
            var downloadUPK = function (index, layero, extra) {
                $.ajax({
                    url: "{% url 'biotime:download_upk' %}",
                    type: "GET",
                    dataType: "html",
                    success: function (pannel) {
                        layer.close(index);
                        layer.open({
                            type: 1,
                            title: extra.txt,
                            zIndex: 1003,
                            area: ['575px', '385px'],
                            content: pannel,
                            btn: [gettext('license_btn_generate'), gettext('license_btn_cancel')],
                            yes: function (index, layero) {
                                var loadIndex = layer.load();
                                $(layero).find(".layui-form").ajaxSubmit({
                                    url: "{% url 'biotime:download_upk' %}"
                                    , type: "POST"
                                    , dataType: "json"
                                    , success: function (callback) {
                                        if (callback.ret == 2) {
                                            window.location.href = "{% url 'biotime:download_upk' %}?_id=" + callback.message;
                                            layer.msg(gettext('download_upk_successful'), {
                                                icon: 1,
                                                time: 3000
                                            }, function () {
                                                layer.closeAll();
                                            })
                                        } else {
                                            layer.msg(callback.message, {icon: 5});
                                        }
                                        layer.close(loadIndex);
                                    }
                                    , error: function () {
                                        layer.close(loadIndex);
                                    }
                                })
                            }
                        });
                    }, error: function () {

                    }
                })
            };
            $("#download_upk").click(function () {
                var extra = {txt: this.text};
                userAuth(downloadUPK, extra);
            });
            var onlineUpgrade = function (index, layero, extra) {
                layer.close(index);
                layer.confirm(gettext("are_you_sure_to_upgrade_license"), {
                    title: extra.txt
                    , btn: [gettext('dialog_confirm_btn_yes'), gettext('dialog_confirm_btn_no')]
                }, function (index) {
                    $.ajax({
                        url: "{% url 'biotime:online_upgrade' %}"
                        , type: "GET"
                        , dataType: "json"
                        , success: function (response) {
                            if (response.ret == 1) {
                                layer.msg(response.message, {icon: 6});
                            } else {
                                layer.msg(response.message, {icon: 5});
                            }
                            layer.close(index)
                        }
                        , error: function () {
                            layer.msg(gettext('system_busy_please_try_later'), {icon: 5});
                            layer.close(index)
                        }
                    })
                })
            };
            $("#online_upgrade_license").click(function () {
                var extra = {txt: this.text};
                userAuth(onlineUpgrade, extra);
            });
            $("#used_FBaccounts").click(function () {
                layer.open({
                    title: "{% trans 'used_FBaccounts_detail' %}",
                    type: 2,
                    area: ['980px', '600px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: "{% url 'biotime:get_used_account' %}?detail=1",
                });
            });
            var exportLicense = function (index, layero, extra) {
                layer.close(index);
                layer.confirm(gettext("are_you_sure_to_export_license"), {
                    title: extra.txt
                    , btn: [gettext('dialog_confirm_btn_yes'), gettext('dialog_confirm_btn_no')]
                }, function (index) {
                    $.ajax({
                        url: "{% url 'biotime:export_license' %}"
                        , type: "GET"
                        , dataType: "json"
                        , success: function (response) {
                            if (response.ret == 2) {
                                window.location.href = "{% url 'biotime:export_license' %}?_id=" + response.message;
                                layer.msg(gettext('export_license_successful'), {icon: 1, time: 3000}, function () {
                                    layer.closeAll();
                                })
                            } else {
                                layer.msg(response.message, {icon: 5});
                            }
                            layer.close(index)
                        }
                        , error: function () {
                            layer.close(index)
                        }
                    })
                })
            };
            $("#export_license").click(function () {
                var extra = {txt: this.text};
                userAuth(exportLicense, extra);
            });
            $("#import_license").click(function () {
                var extra = {txt: this.text};
                userAuth(offlineActivation, extra);
            });

            function get_used_account() {
                $.ajax({
                    url: "{% url 'biotime:get_used_account' %}",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        console.log(151)
                        $('#used_FBaccounts').html(data['used_FBaccounts']);
                        $('#used_companies').html(data['used_companies']);
                    }, error: function () {

                    }
                })
            };
            get_used_account()
        });
    </script>
</div>